<template>
<div class="table-search-page">
    <div class="g-tabs-wrapper">
        <a-tabs :activeKey="currentActiveKey" @change="changeTabs" type="line">
            <a-tab-pane :key="1" tab="客户接待"></a-tab-pane>
            <a-tab-pane :key="2" tab="待分诊"></a-tab-pane>
            <a-tab-pane :key="3" tab="等候咨询"></a-tab-pane>
            <a-tab-pane :key="6" tab="已转诊"></a-tab-pane>
            <a-tab-pane :key="4" tab="咨询中"></a-tab-pane>
            <a-tab-pane :key="5" tab="已咨询"></a-tab-pane>
        </a-tabs>
    </div>
    <a-card :bodyStyle="tstyle" :bordered="false" style="padding: 0 24px;">
        <div class="table-page-search-wrapper">
            <a-row :gutter="12">
                <a-col :md="12" :lg="4" :sm="12">
                    <a-form layout="inline" :form="form" :selfUpdate="true">
                        <a-form-item label="客户卡号">
                            <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['cardNo']" allow-clear placeholder="请输入客户卡号" />
                        </a-form-item>
                    </a-form>
                </a-col>
                <a-col :md="12" :lg="4" :sm="12">
                    <a-form layout="inline" :form="form">
                        <a-form-item label="客户姓名">
                            <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['name']" allow-clear placeholder="请输入客户姓名" />
                        </a-form-item>
                    </a-form>
                </a-col>
                <a-col :md="12" :lg="4" :sm="12">
                    <a-form layout="inline" :form="form">
                        <a-form-item label="联系号码">
                            <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['tel']" allow-clear placeholder="请输入联系号码" />
                        </a-form-item>
                    </a-form>
                </a-col>

                <a-col :md="12" :lg="4" :sm="12">
                    <a-form layout="inline" :form="form">
                        <a-form-item label="接收咨询">
                               <a-select
                                :showSearch="true"
                                option-filter-prop="children"
                                option-label-prop="label"
                                allow-clear
                                placeholder="咨询师"
                                v-decorator="['triage_receive_man_id',]"
                                >
                                <a-select-option v-for="item in sysUserArr" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                                </a-select>
                        </a-form-item>
                    </a-form>
                </a-col>
                
                <a-col :md="12" :lg="4" :sm="12">
                    <a-icon :type="advanced ? 'up' : 'down'" @click="advanced = !advanced" style="margin-right: 15px" />
                    <a-button style="margin-bottom: 4px;" type="primary" @click="clickSearch">查询</a-button>
                    <a-button style="margin-bottom: 4px;margin-left: 10px;" @click="clickReset">重置</a-button>
                </a-col>


            </a-row>

            <a-row :gutter="12" v-if="advanced">
                <a-form layout="inline" :selfUpdate="true" :form="form">
                    <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px">
                        <a-form-item label="所属咨询">
                            <a-select :showSearch="true" option-filter-prop="children" allow-clear option-label-prop="label" style="width: 100%" v-decorator="['consultMan']" placeholder="选择，搜索">
                                <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-form>

                <a-form layout="inline" :selfUpdate="true" :form="form">
                    <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px">
                        <a-form-item label="开发人员">
                            <a-select :showSearch="true" option-filter-prop="children" allow-clear option-label-prop="label" style="width: 100%" v-decorator="['developer']" placeholder="选择，搜索">
                                <a-select-option v-for="item in developerUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-form>

                <a-form layout="inline" :selfUpdate="true" :form="form">
                    <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px">
                        <a-form-item label="就诊状态">
                            <a-select allow-clear option-label-prop="label" style="width: 100%" v-decorator="['admissionState']" placeholder="状态类型">
                                <a-select-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id">{{
                                    item.name
                                }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-form>

                <a-form layout="inline" :selfUpdate="true" :form="form">
                    <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px">
                        <a-form-item label="咨询项目" :wrapperCol="wrapperCol" has-feedback>
                            <a-cascader 
                               allow-clear 
                               :options="ConsultationAppeal" 
                               expand-trigger="hover" 
                               :show-search="{ filter }"
                               v-decorator="['receive_item_id']" 
                               placeholder="选择，可搜索" />
                        </a-form-item>
                    </a-col>
                </a-form>

            </a-row>
        </div>
    </a-card>
    <a-card style="padding: 0" :bordered="false">
        <div style="position: relative">
            <a-button icon="plus-circle" type="primary" style="position: absolute;top:-10px;" @click="$refs.addTriageForm.add()">新增接待</a-button>
            <super-table size="small" :pageSize="50" :bordered="true" :pagination="pagination" style="margin-top: 5px;" :scroll="{ x: 1100}" ref="table" ls_props_columns="customerTriage" :rowKey="(record,index)=> index" :columns="columns" :data="loadData">
                <template slot="index" slot-scope="text,record,index">
                    <span>{{(queryParam.pageNum - 1) * queryParam.pageSize + (index + 1)}}</span>
                </template>
                <!--咨询状态-->
                <template slot="consultStateId" slot-scope="text,record">
                    <a-tag v-if="text == '09011501'" :color=" 'green' "> {{record.consultState}} </a-tag>
                    <a-tag v-if="text == '09011502'" :color=" 'blue' "> {{record.consultState}} </a-tag>
                    <a-tag v-if="text == '09011503'" :color=" 'orange' "> {{record.consultState}} </a-tag>
                    <a-tag v-if="text == '09011504'" :color=" 'grey' "> {{record.consultState}} </a-tag>
                    <a-tag v-if="text == '09011505'" :color=" 'red' "> {{record.consultState}} </a-tag>
                </template>

                <!-- 接待来源 -->
                <template slot="source_type" slot-scope="text,record">
                    <a-tag v-if="text == '1'" :color=" 'blue' "> {{record.source_type_name}} </a-tag>
                    <a-tag v-if="text == '2'" :color=" 'green' "> {{record.source_type_name}} </a-tag>
                </template>

                <!-- 姓名 -->
                <template slot="sex" slot-scope="text,record">
                    <div style="display:flex;flex-direction:row;align-items: center">
                        <img v-if="record.sex == '女'" src="../../../assets/wan_sex_w.png" style="width:14px;height:14px" alt="">
                        <img v-if="record.sex == '男'" src="../../../assets/wan_sex_m.png" style="width:14px;height:14px" alt="">
                        <span>{{record.name}}</span>
                    </div>
                </template>

                <!--客户卡号-->
                <template slot="cardNo" slot-scope="text,record">
                    <a class=" g-f-14" @click="toDetails(text,record)">{{ text }}</a>
                    <a-tooltip placement="top">
                        <template slot="title"> 复制 </template>
                        <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
                    </a-tooltip>
                </template>
                <!-- 是否转诊 -->
                <template slot="is_referral" slot-scope="text">
                    <span v-if="text==0 ||!text" style="color:grey">暂无</span>
                    <!-- <span v-if="text==1" style="color:blue">已转诊</span> -->
                    <a-tag v-if="text==1" :color="'#39f'">
                        已转诊
                    </a-tag>

                </template>

                <!--咨询项目-->
                <template slot="itemName" slot-scope="text">
                    <a-tooltip>
                        <template slot="title">
                            {{ text }}
                        </template>
                        {{text}}
                    </a-tooltip>
                </template>
                <!--等待时间-->
                <template slot="timestampdiff" slot-scope="text,record">
                    <up-time v-if="useUpTime(record)" :time="minutesToSeconds(text)"></up-time>
                    <span v-else style="color: #333333;font-size: 16px;">{{text}}</span>

                </template>

                <template slot="action" slot-scope="record">
                    <div class="g-flex">
                         <!-- <a-button  class="g-bt-pad-0" type="link" @click="clickReferral(record)">转诊</a-button> -->
                        <a-button v-if="record.clientId" class="g-bt-pad-0" type="link" @click="clickTriage(record)">分诊</a-button>
                        <a-button v-if="record.clientId" class="g-bt-pad-0" :disabled="record.consultStateId=='09011505'" type="link" :style="{color:record.consultStateId=='09011505' ?'':'rgb(250, 84, 28)'}" @click="clickReferral(record)">转诊</a-button>
                        <a-button v-if="record.clientId" class="g-bt-pad-0" :disabled="record.consultStateId=='09011504'||record.consultStateId=='09011505' || record.consultStateId=='09011501'|| record.consultStateId=='09011502'" type="link" @click="clickCancel(record)">
                            取消
                        </a-button>
                    </div>

                    <!-- <div class="g-flex">
              <a-button class="g-bt-pad-0" type="link" :disabled= "['09011505','09011503','09011502'].indexOf(record.consultStateId) == -1"   @click="clickTriage(record)">分诊</a-button>
              <a-button class="g-bt-pad-0" type="link" :disabled= "['09011501','09011502'].indexOf(record.consultStateId) == -1"     style="color:rgb(250, 84, 28);" @click="clickReferral(record)">转诊</a-button>
              <a-button class="g-bt-pad-0"  type="link" :disabled= "['09011505','09011503','09011502'].indexOf(record.consultStateId) == -1"   @click="clickCancel(record)">
                取消
              </a-button>
            </div> -->
                </template>
            </super-table>
        </div>

    </a-card>
    <!--新增回访--弹窗-->
    <add-triage-form ref="addTriageForm" />
    <!--分诊--弹窗-->
    <triage ref="triage" />
    <!--转诊--弹窗-->
    <referral ref="referral" />
    <!--取消--弹窗-->
    <cancel-triage ref="cancelTriage" />
</div>
</template>

<script>
import {
    receiveList
} from '@/api/modular/main/customer/customerTriage'
import {
    SuperTable,
    upTime
} from '@/components'
import {
    dictTypeListForCode,getZXS
} from '@/api/modular/main/customer/customerTriage'

import {
    getClientDemandName,
} from '@/api/modular/main/customer/customerConsultation'
import addTriageForm from '@/views/customer/customerTriage/addTriageForm'
import triage from '@/views/customer/customerTriage/triage'
import referral from '@/views/customer/customerTriage/referral'
import CancelTriage from '@/views/customer/customerTriage/cancelTriage'

export default {
    components: {
        CancelTriage,
        SuperTable,
        upTime,
        addTriageForm,
        triage,
        referral
    },
    data() {
        return {
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 15
                }
            },
            currentActiveKey: 1,
            form: this.$form.createForm(this),
            loadData: parameter => {
                this.queryParam.pageNum = parameter.pageNum || 1
                this.queryParam.pageSize = parameter.pageSize || 10
                return receiveList(this.queryParam).then(res => {
                    this.loading = false //关闭加载
                    return res
                })
            },
            allHisUser: [],
            // 高级搜索 展开/关闭
            advanced: false,
            tstyle: {
                'margin-bottom': '10px'
            },
            columns: [{
                    title: '序号',
                    width: 60,
                    scopedSlots: {
                        customRender: 'index'
                    },
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '就诊状态',
                    dataIndex: 'admissionState',
                    align: 'center',
                    width: 120,
                    fixed: 'left'
                },
                {
                    title: '接待来源',
                    dataIndex: 'source_type',
                    scopedSlots: {
                        customRender: 'source_type'
                    },
                    align: 'center',
                    width: 100,
                    fixed:'left'
                },
                {
                    title: '接待时间',
                    dataIndex: 'recordDate',
                    align: 'center',
                    fixed:'left',
                    width: 144
                },
                {
                    title: '咨询状态',
                    dataIndex: 'consultStateId',
                    align: 'center',
                    scopedSlots: {
                        customRender: 'consultStateId'
                    },
                    fixed: 'left',
                    width: 120
                },
                {
                    title: '卡号',
                    dataIndex: 'cardNo',
                    align: 'left',
                    scopedSlots: {
                        customRender: 'cardNo'
                    },
                    fixed: 'left',
                    width: 150
                },
                {
                    title: '姓名',
                    dataIndex: 'sex',
                    fixed: 'left',
                    scopedSlots: {
                        customRender: 'sex'
                    },
                    align: 'left',
                    width: 130
                },
                // phone_number
                 {
                    title: '手机号',
                    dataIndex: 'phone_number',   
                    align: 'left',
                    width: 130
                },
                {
                    title: '咨询项目',
                    dataIndex: 'receiveItemName',
                    align: 'left',
                    width: 110,
                    scopedSlots: {
                        customRender: 'itemName'
                    },
                    ellipsis: true
                },
                {
                    title: '当前咨询师',
                    dataIndex: 'consultMan',
                    align: 'center',
                    width: 100
                },
                {
                    title: '是否转诊',
                    dataIndex: 'is_referral',
                    scopedSlots: {
                        customRender: 'is_referral'
                    },
                    align: 'center',
                    width: 100
                },
                {
                    title: '转出人',
                    dataIndex: 'referralMan',
                    align: 'center',
                    width: 100
                },
                {
                    title: '接收人',
                    dataIndex: 'consult_man',
                    align: 'center',
                    width: 100
                },
                {
                    title: '分诊开始时间',
                    dataIndex: 'ttRecordDate',
                    align: 'center',
                    width: 150
                },
                {
                    title: '咨询开始时间',
                    dataIndex: 'tcrRecordDate',
                    align: 'center',
                    width: 150,
                    ellipsis: true
                },
                // { title: '等待时间', dataIndex: 'timestampdiff', scopedSlots: { customRender: 'timestampdiff' }, width: 150 },
                {
                    title: '开发人',
                    dataIndex: 'developerid',
                    align: 'center',
                    width: 120
                },
                {
                    title: '所属咨询',
                    dataIndex: 'belConsultManId',
                    align: 'center',
                    width: 120
                },
                {
                    title: '接待人',
                    dataIndex: 'receiveMan',
                    align: 'center',
                    width: 120
                },
                {
                    title: '接待科室',
                    dataIndex: 'department',
                    align: 'center',
                    width: 120
                },
                {
                    title: '取消原因',
                    dataIndex: 'cancelReason',
                    align: 'center',
                    width: 120
                },
                {
                    title: '操作',
                    scopedSlots: {
                        customRender: 'action'
                    },
                    align: 'center',
                    width: 120,
                    fixed: 'right'
                },
            ],
            data: [],
            pagination: {
                
                pageSizeOptions: ['50', '100', '150','200'], //这里注意只能是字符串，不能是数字
               
            },
            // 查询参数
            queryParam: {
                pageNum: 1, //第几页
                pageSize: 20, //每页中显示数据的条数
                cardNo: undefined, //客户卡号
                name: undefined, //客户姓名
                tel: undefined, //客户联系方式
                customerId: undefined, //客户id
                consultState: undefined, //咨询状态
                isReferral: undefined //是否转诊
            },
            loading: true, //加载状态
            stateList: [{
                name: "初诊",
                id: "09011301",

            }, {
                name: "复诊",
                id: "09011302",

            }, {
                name: "再消费",
                id: "09011303",

            }, {
                name: "复查",
                id: "09011304",

            }, {
                name: "其他",
                id: "09011305",

            }],
            ConsultationAppeal: [],
            sysUserArr:[]
        }
    },
    activated(){
         this.$refs.table.refresh()

    },

    created() {
        dictTypeListForCode({
            code: "XCZXS"
        }).then((res) => {
            // console.log('全员员工接口',res)
            this.allHisUser = res
        })

        // 开发人员 
        dictTypeListForCode({
            code: "WLZXS"
        }).then((res) => {
            // console.log('全员员工接口',res)
            this.developerUser = res
        })
        // 接收咨询
        getZXS().then(res=>{
            this.sysUserArr = res.userList
        })
        this.getConsultationAppeal()

    },

    methods: {
        clearSpace(e){
           // console.log("e",e.target.value)
           e.target.value=e.target.value.replace(/\s+/g,'')
        },
        filter(inputValue, path) {
           return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
        },
        getConsultationAppeal() {
            getClientDemandName().then(res => {
                this.ConsultationAppeal = res.rows
            })

        },
        useUpTime(record) {
            if ((record.ttRecordDate == '-' || record.tcrRecordDate == '-')) {
                return true
            }
            return false
        },
        toCountDown(time) {
            //1000代表1秒，1000*60代表60分钟
            return Date.now() + parseInt(time) * 60 * 1000
        },
        minutesToSeconds(time) {
            return parseInt(time) * 60
        },
        //点击查询
        clickSearch() {
            const form_values = this.form.getFieldsValue()
            if (form_values.receive_item_id && form_values.receive_item_id.length > 1) {
                // form_values.receive_item_id=form_values.receive_item_id[1]
                console.log(form_values.receive_item_id[1])
                let id = form_values.receive_item_id[1]
                form_values.receive_item_id = id
            } else {
                form_values.receive_item_id = undefined
            }
        
            this.queryParam = Object.assign(this.queryParam, form_values)
            this.$refs.table.refresh(true)
        },
        clickReset() {
            this.form.resetFields()
            this.queryParam.cardNo = undefined
            this.queryParam.name = undefined
            this.queryParam.tel = undefined
        },
        //事件切换动作
        onChangePlanTime(date, dateString) {
            this.queryParam.PlanTimeStart = dateString[0]
            this.queryParam.PlanTimeEnd = dateString[1]
        },
        changeTabs(key) {
            this.currentActiveKey = key
            this.queryParam.isReferral = undefined
            //客户接待
            if (key == 1) {
                this.queryParam.consultState = undefined
            }
            //待分诊
            if (key == 2) {
                this.queryParam.consultState = '09011505'
            }
            //待咨询
            if (key == 3) {
                this.queryParam.consultState = '09011503'
            }
            //咨询中
            if (key == 4) {
                this.queryParam.consultState = '09011501'
            }
            //已咨询
            if (key == 5) {
                this.queryParam.consultState = '09011502'
            }
            // 已转诊
            if (key == 6) {
                this.queryParam.consultState = undefined
                this.queryParam.isReferral = 1
            }
            this.$refs.table.loadData()
        },
        //分诊
        clickTriage(record) {
            this.$refs.triage.add(record)
        },
        //转诊
        clickReferral(record) {
            if (!record.belConsultManId || record.belConsultManId == '-') {
                this.$message.warning('该顾客目前没有所属咨询，不能转诊')
                return
            }
            this.$refs.referral.add(record)
        },
        //取消分诊
        clickCancel(record) {
            this.$refs.cancelTriage.add(record)
        },
        //点击查看客户详情
        toDetails(text, record) {
            console.log(record)
            this.$router.push({
                path: 'customer_details',
                query: {
                    id: record.clientId,
                    card_no: record.cardNo,
                    customerName:record.name
                }
            })
        },
    }

}
</script>

<style lang="less" scoped>
.pickerTime {
    margin-top: 10px;
    margin-bottom: 20px;
}

.table-operator {
    margin-bottom: 18px;
}

button {
    margin-right: 8px;
    margin-bottom: 2px;
}
</style>
